<template>
	<view>
		<view style="height: 180rpx; background-color: white;"></view>
		<view class="fixed">
			<view class="header">
				<view class="btn1" @tap="back">取 消</view>
				<view class="btn2" @tap="clickConfirm">发 布</view>
			</view>
			<view class="header" style="height: 20rpx;border-bottom: 1rpx solid #e7eaea;"></view>
		</view>
		<view style="height: 10rpx;"></view>
		<view class="item">
			<view class="type">
				<view class="text">物品名称：</view>
				<input class="input1" type="text" placeholder="请输入名称,例如:电动工具,钢材等" v-model="name">
			</view>
			<view class="type">
				<view class="text">买入价格：</view>
				<input class="input1" type="text" placeholder="请输入价格" v-model="price">
			</view>
			<view class="type">
				<view class="text">品牌：</view>
				<input class="input1" type="text" placeholder="请输入品牌" v-model="brand">
			</view>

			<view class="type">
				<view class="text">使用情况：</view>
				<view class="btn" @tap="goActive1(1)" :class="[active1==1?'active1':'']">全新
				</view>
				<view class="btn" @tap="goActive1(2)" :class="[active1==2?'active1':'']">轻微痕迹
				</view>
				<view class="btn" @tap="goActive1(3)" :class="[active1==3?'active1':'']">明显痕迹
				</view>
			</view>
			<view class="type">
				<view class="text">照片：</view>
				<uploads :type="code"></uploads>
				<!-- <image src="@/static/images/Add.png" mode="widthFix" class="add"></image> -->
			</view>

			<view class="type">
				<view class="text">想要换：</view>
				<input class="input1" type="text" placeholder="请输入想要换的物品" v-model="target">
			</view>

			<view class="type">
				<view class="text">联系电话：</view>
				<input class="input1" type="text" placeholder="请输入联系电话" v-model="mobile">
			</view>

			<view class="type typeBottom">
				<image src="@/static/images/tianjiadidian.png" class="location" mode="widthFix"></image>
				<Region :defaultValue="defaultValue" @change="onChangeRegion"></Region>
				<!-- <image src="@/static/images/right1.png" mode="widthFix" class="right"></image> -->
			</view>
		</view>
		<view style="height: 50rpx;"></view>
	</view>
</template>

<script>
	import Region from '@/components/region/region.vue';
	import uploads from "@/components/uploads.vue";
	export default {
		data() {
			return {
				noClick: true,
				defaultValue: [],
				active1: 1,
				code: '1',
				pics: '',
				name: '',
				brand: '',
				price: '',
				target: '',
				mobile: '',
				location: ''
			};
		},

		components: {
			Region,
			uploads
		},

		onLoad: function() {
			// this.loadData();

			uni.$on('change', (options) => {
				this.pics = JSON.stringify(options)
			})
		},

		methods: {
			goActive1(type) {
				this.active1 = type;
			},

			back() {
				uni.redirectTo({
					url: '/pages7/pages/index/index'
				})
			},

			onChangeRegion(region) {
				let id = 0;
				let area = [];
				this.location = region[0].name + region[1].name;
				if (region[2].id > 0) {
					id = region[2].id;
					area = [region[0].name, region[1].name, region[2].name];
					this.location = this.location + region[2].name;
				} else {
					id = region[1].id;
					area = [region[0].name, region[1].name, ''];
				}
				this.defaultValue = area;
			},

			// 提交表单
			async clickConfirm() {
				//防止连续点击
				let that = this;
				if (that.noClick) {
					that.noClick = false;
					setTimeout(function() {
						that.noClick = true;
					}, 2000)
				} else {
					that.$api.msg("请稍后点击")
					return false;
				}
				//判断是否登录
				let result = that.$api.isLogin();
				if (result === false) {
					return false;
				}

				if (!that.name) {
					that.$api.msg('请输入物品名称！');
					return false;
				}

				if (!that.price || that.price <= 0) {
					that.$api.msg('请输入价格！');
					return false;
				}

				if (!that.brand) {
					that.$api.msg('请输入品牌！');
					return false;
				}

				if (!that.pics) {
					that.$api.msg('请上传照片！');
					return false;
				}

				if (!that.target) {
					that.$api.msg('请输入想要换的物品！');
					return false;
				}

				if (!that.mobile) {
					that.$api.msg('请输入手机号码！');
					return false;
				}

				let token = uni.getStorageSync('token')
				let cate = uni.getStorageSync('cate')
				let dataObj = {
					token: token,
					cate: cate,
					name: that.name,
					price: that.price,
					brand: that.brand,
					degree: that.active1,
					pics: that.pics,
					target: that.target,
					mobile: that.mobile,
					location: that.location
				};

				// console.log(dataObj)
				that.submit(dataObj);
			},

			//登录提交
			async submit(dataObj) {
				let res = await this.$myRequest({
					url: '/add_exchange',
					data: dataObj,
					methods: 'post'
				})

				let status = res.data.status
				if (status) {
					this.$api.msg('添加成功');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages7/pages/index/index'
						})
					}, 1000)
				}
			},
		},
	}
</script>

<style lang="scss">
	page {
		font-size: 30rpx;
		// padding-right: 5rpx;
	}

	.fixed {
		position: fixed;
		top: 0rpx;
		z-index: 10000;
		width: 100%;
		// margin-top: 30rpx;
		height: 200rpx;
		background-color: white;
	}

	.header {
		display: flex;
		justify-content: space-between;
		position: absolute;
		bottom: 30rpx;
		width: 100%;
		align-items: center;

		.btn1 {
			margin-left: 35rpx;

		}

		.btn2 {
			color: white;
			background-color: #f3511a;
			border-radius: 50rpx;
			padding: 10rpx;
			width: 100rpx;
			text-align: center;
			margin-right: 35rpx;
			margin-bottom: 20rpx;
		}
	}

	.item {
		.type {
			display: flex;
			align-items: flex-start;
			margin-left: 30rpx;
			margin-top: 20rpx;
			flex-wrap: wrap;

			.text {
				letter-spacing: 2rpx;
				font-size: 28upx;
				height: 70rpx;
				line-height: 70rpx;
				width: 22%;
			}

			.input1 {
				background-color: #f5f5f5;
				padding: 20rpx;
				height: 70rpx;
				width: 75%;
				font-size: 28rpx;
			}

			.textarea {
				height: 200rpx;
			}

			.icon {
				width: 30rpx;
				height: 30rpx;
				margin-top: 5rpx;
				margin-right: 10rpx;
				margin-left: 10rpx;
			}

			.btn {
				color: #999999;
				background-color: #f7f7f7;
				text-align: center;
				border-radius: 10rpx;
				margin-left: 20rpx;
				padding: 10rpx;
				margin-top: 10rpx;
				font-size: 28upx;
			}

			.add {
				width: 200rpx;
				height: 200rpx;
			}

			.add-btn {
				display: flex;
				height: 100%;
				width: 80%;
				flex-wrap: wrap;
			}

			.text2 {
				// margin-top: 20rpx;
			}
		}

		.type1 {
			display: flex;
			margin-left: 10rpx;
			// margin-top: 10rpx;
		}

		.typeBottom {
			width: 90%;
			margin: 20rpx auto;
			background-color: #f5f5f5;
			border-radius: 10rpx;
			height: 100rpx;
			display: flex;
			align-items: center;

			.location {
				width: 30rpx;
				height: 36rpx;
				margin: 20rpx;
			}

			.type-didian {
				flex: 1;
			}

			.right {
				width: 14rpx;
				height: 24rpx;
				margin-right: 30rpx;
			}
		}
	}

	.active1,
	.active2,
	.active3 {
		background-color: #3c87fe !important;
		color: #fff !important;
	}
</style>
